<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body onload="getInfo()">
<div id="container" style="height: 500px"></div>
<div id="allDataContainer">
    <div id="domesticCityEpidemic"></div>
    <div id="domesticEpidemic"></div>
    <div id="foreignEpidemic"></div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=ARRwLpoQ8Qrtqdkw4IG1zB2tM0TgIRdk&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var domesticCityEpidemicData = [];
    var domesticEpidemicData = [];
    var foreignEpidemicData = [];

    function getInfo(){
        this.getDomesticCityEpidemic()
        this.getDomesticEpidemic()
        this.getForeignEpidemic()
    }

    function getDomesticCityEpidemicData(data) {
        this.domesticCityEpidemicData = data.info
        console.log(this.domesticCityEpidemicData)
        this.option.series[0].data = convertData(data.info)

        /**
         * echarts 地图页面渲染
         * 数据获取后才开始渲染，
         * 所以这串代码放在这里，
         * 为了能把数据渲染上去
         */
        if (option && typeof option === "object") {
            console.log(option)
            myChart.setOption(option, true);
        }
    }

    var geoCoordMap = {
        '山东': [117.000923, 36.675807],
        '河北': [115.48333, 38.03333],
        '吉林': [125.35000, 43.88333],
        '黑龙江': [127.63333, 47.75000],
        '辽宁': [123.38333, 41.80000],
        '内蒙古': [111.670801, 41.818311],
        '新疆': [87.68333, 43.76667],
        '甘肃': [103.73333, 36.03333],
        '宁夏': [106.26667, 37.46667],
        '山西': [112.53333, 37.86667],
        '陕西': [108.95000, 34.26667],
        '河南': [113.65000, 34.76667],
        '安徽': [117.283042, 31.86119],
        '江苏': [119.78333, 32.05000],
        '浙江': [120.20000, 30.26667],
        '福建': [118.30000, 26.08333],
        '广东': [113.23333, 23.16667],
        '江西': [115.90000, 28.68333],
        '海南': [110.35000, 20.01667],
        '广西': [108.320004, 22.82402],
        '贵州': [106.71667, 26.56667],
        '湖南': [113.00000, 28.21667],
        '湖北': [114.298572, 30.584355],
        '四川': [104.06667, 30.66667],
        '云南': [102.73333, 25.05000],
        '西藏': [91.00000, 30.60000],
        '青海': [96.75000, 36.56667],
        '天津': [117.20000, 39.13333],
        '上海': [121.55333, 31.20000],
        '重庆': [106.45000, 29.56667],
        '北京': [116.41667, 39.91667],
        '台湾': [121.30, 25.03],
        '香港': [114.10000, 22.20000],
        '澳门': [113.50000, 22.20000]
    };

    var convertData = function (domesticCityEpidemicData) {
        var res = [];
        for (var i = 0; i < domesticCityEpidemicData.length; i++) {
            var geoCoord = geoCoordMap[domesticCityEpidemicData[i].city];
            if (geoCoord) {
                res.push({
                    name: domesticCityEpidemicData[i].city,
                    value: geoCoord.concat(domesticCityEpidemicData[i].existing)
                });
            }
        }
        return res;
    };

    option = {
        title: {
            text: '全国主要城市疫情情况',
            subtext: 'data baidu.com',
            sublink: 'https://gitee.com/lv_hao12138/com.lvhaosb.newpneumonia',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                }, {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                }, {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series: [
            {
                name: '新冠现存',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: convertData(domesticCityEpidemicData),
                symbolSize: function (val) {
                    if(val[2] === 0){
                        return 0;
                    }else{
                        return val[2] / 15 + 8;
                    }

                },
                encode: {
                    value: 2
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                itemStyle: {
                    color: 'purple'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(domesticCityEpidemicData.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),
                symbolSize: function (val) {
                    return 0 / 15 + 0;
                },
                encode: {
                    value: 2
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                zlevel: 1
            }
        ]
    };
    ;

    /**
     * 获取国内各城市疫情数据
     */
    function getDomesticCityEpidemic() {
        var that = this
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/newpneumonia/domestic_city_epidemic/new_info",
            success: function (data) {
                that.getDomesticCityEpidemicData(data)
                for(let i = 0; i < data.info.length; i++){
                    document.getElementById("domesticCityEpidemic").innerHTML = document.getElementById("domesticCityEpidemic").innerHTML +
                        "<p>城市：" + data.info[i].city + " 时间：" + data.info[i].time + " 新增：" + data.info[i].newlyAdded +
                        " 现有：" + data.info[i].existing + " 死亡：" + data.info[i].died + " 治愈：" + data.info[i].cure +
                        " 累计：" + data.info[i].cumulative + "</p>"
                }

            }
        });
    }

    /**
     * 获取国内疫情数据
     */
    function getDomesticEpidemic() {
        let that = this
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/newpneumonia/domestic_epidemic/new_info",
            success: function (data) {
                that.getDomesticEpidemicData(data)
                document.getElementById("domesticEpidemic").innerHTML = data.info
            }
        });
    }

    /**
     * 获取国外疫情数据
     */
    function getForeignEpidemic() {
        let that = this
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/newpneumonia/foreign_epidemic/new_info",
            success: function (data) {
                that.getForeignEpidemicData(data)
                document.getElementById("foreignEpidemicData").innerHTML = data.info
            }
        });
    }
</script>
</body>
</html>
